<template>
  <ul>
    <md-scroll-view
      ref="scrollView"
      :scrolling-x="false"
      @endReached="$_onEndReached"
      @refreshing="$_onRefresh"
    >
      <md-scroll-view-refresh
        slot="refresh"
        slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
        :scroll-top="scrollTop"
        :is-refreshing="isRefreshing"
        :is-refresh-active="isRefreshActive"
      ></md-scroll-view-refresh>
      <md-result-page
        v-if="data.length === 0"
        class="customized"
        text="暂无数据..."
        subtext="要不然刷新试试？"
      >
      </md-result-page>
      <li v-for="(item, index) in data" :key="index">
        <div class="info">
          您的好友{{ item.username }}购买订单{{
            item.order_money
          }}，你获得订单提成
        </div>
        <div class="money">{{ item.money }}</div>
      </li>
      <md-scroll-view-more slot="more" :is-finished="isFinished">
      </md-scroll-view-more>
    </md-scroll-view>
  </ul>
</template>

<script>
import {
  ScrollView,
  ScrollViewMore,
  ScrollViewRefresh,
  ResultPage
} from "mand-mobile";
export default {
  name: "member",
  components: {
    [ScrollView.name]: ScrollView,
    [ScrollViewMore.name]: ScrollViewMore,
    [ScrollViewRefresh.name]: ScrollViewRefresh,
    [ResultPage.name]: ResultPage
  },
  data() {
    return {
      isFinished: false,
      pageNumber: 1,
      data: []
    };
  },
  methods: {
    $_onEndReached() {
      if (this.isFinished) {
        return;
      }
      this.pageNumber++;
      this.getInfo();
    },
    $_onRefresh() {
      this.$nextTick(() => {
        this.pageNumber = 1;
        this.isFinished = false;
        this.getInfo(true);
      });
    },
    getInfo(refresh) {
      this.$ajax
        .post(
          this.$api.incomeList,
          {
            pageSize: 10,
            pageNumber: this.pageNumber
          },
          false
        )
        .then(res => {
          if (refresh) {
            this.data = res.data;
            this.$refs.scrollView.finishRefresh();
          } else {
            this.data.push.apply(this.data, res.data);
          }
          // if (this.info.curpage === this.totalPage) {
          //     this.isFinished = true;
          // }
          this.$refs.scrollView.finishLoadMore();
        })
        .catch(err => {
          this.$toast.failed(err);
        });
    }
  },
  created() {
    this.getInfo();
  }
};
</script>

<style scoped lang="stylus">
ul{
  height 100%
  li{
    padding 31px
    border-bottom  1px solid #F0F0F0
    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    >div{
      font-size 24px
      color #666666;
    }
    .money{
      text-align right
      font-size 30px;
      color #327EB9
      font-family:PingFang-SC-Regular;
      font-weight:bold;
    }
  }
}
</style>
